<template>
  <el-card class="container" :body-style="{ padding: 0 }">
    <el-calendar v-model="currentDate" class="calendar">
      <template #date-cell="{ data }">
        <p
          :class="[
            data.isSelected ? 'is-selected' : '',
            calendarItemBgClass(data.day)
          ]"
        >
          {{ data.day.split('-').slice(2).join('') }}
          <br />
          <!-- 当日金额 -->
          <span class="amount" v-if="getTadayAmount(data.day)">{{
            getTadayAmount(data.day)
          }}</span>
        </p>
      </template>
    </el-calendar>
  </el-card>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getChartCalendar } from '@/api/chart'
import emitter from '@/utils/eventHub'

const currentDate = ref(new Date())

// 获取日历数据
const calendarData = ref([])
const getCalendarData = async () => {
  const res = await getChartCalendar()
  calendarData.value = res.result
}
getCalendarData()

// 收益缓存数据
// key 日期
// value 金额
const dateAmountObj = ref({})

// 返回指定日期的收益数据
const getTadayAmount = (date) => {
  if (dateAmountObj.value[date]) {
    return dateAmountObj.value[date]
  }
  const tadayData = calendarData.value.find((item) => item.date === date)
  if (!tadayData) return 0
  const tadayAmount = tadayData.amount
  // 对数据进行缓存
  dateAmountObj.value[date] = tadayAmount
  return tadayAmount
}

// 返回日历背景 根据金额不同 展示不同的颜色
const calendarItemBgClass = (day) => {
  const amount = getTadayAmount(day)
  if (amount > 0) {
    return 'profit'
  } else if (amount < 0) {
    return 'loss'
  }
  return ''
}

// 监听日期的变化
watch(currentDate, (val) => {
  emitter.emit('calendarChange', val)
})
</script>

<style lang="scss" scoped>
.container {
  height: 500px;
  .calendar {
    ::v-deep .el-calendar__body {
      padding: 0 12px 12px;
      font-size: 14px;
    }
    ::v-deep .el-calendar-day {
      height: 66px !important;
      padding: 0 !important;
      p {
        height: 100%;
        padding: 8px;
      }
      // 金额样式
      .amount {
        font-size: 12px;
      }
      // 正收益
      .profit {
        background-color: #f3fff3;
        span {
          color: #649840;
        }
      }
      // 负收益
      .loss {
        background-color: #ffe7e7;
        span {
          color: #b65d59;
        }
      }

      .is-selected {
        background-color: #d6f2ff;
      }
    }
  }
}
</style>
